<template>
  <view class="container">
    <view class="card-button unbind" v-if="userInfo.bindThirdParty == 1">
      <ve-icon name="wx" size="48"></ve-icon>
      <view class="c-title">已绑定</view>
      <view class="btn" @click="handleUnbind">解绑</view>
    </view>
    <view class="card-button" v-else-if="userInfo.bindThirdParty == 0">
      <ve-icon name="wx" size="48"></ve-icon>
      <view class="c-title">未绑定</view>
      <view><view class="btn" @click="handleBind">绑定</view></view>
    </view>

    <!-- 绑定 -->
    <ve-confirm titleText="提示" v-model="bindVisible" :showCancel="false" @confirm="bindVisible = false">
      <view class="confirmCont">
        <view>请前往PC端网页版，登录后在页面右上方的用户信息中进行微信绑定</view>
      </view>
    </ve-confirm>
    <!-- 解绑 -->
    <ve-confirm titleText="解除提示" v-model="unbindVisible" @confirm="handleUnbindOk">
      <view class="confirmCont">
        <view>
          解除绑定后，您将无法使用微信快捷登录。
          <ve-gap size="2"></ve-gap>
          确认要解绑吗？
        </view>
      </view>
    </ve-confirm>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  import { wxUnbindUser, updateUser } from '@/api/common/login'
  import { onLoad } from '@dcloudio/uni-app'

  // 解绑
  const unbindVisible = ref(false)
  const handleUnbind = () => {
    unbindVisible.value = true
  }
  const handleUnbindOk = () => {
    wxUnbindUser().then(() => {
      uni.showToast({
        title: '解绑成功',
        icon: 'none',
      })
      userInfo.value.bindThirdParty = 0
      unbindVisible.value = false
    })
  }
  // 绑定
  const bindVisible = ref(false)
  const handleBind = () => {
    bindVisible.value = true
  }

  const userInfo = ref({})
  onLoad(() => {
    updateUser().then((res) => {
      userInfo.value = res.result
    })
  })
</script>

<style lang="scss">
  .container {
    padding: 24rpx;
    height: 100vh;
  }
  .card-button {
    margin-bottom: 24rpx;
    height: 140rpx;
    background-color: #ffffff;
    border-radius: 8rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 24rpx;
    .c-title {
      margin-left: 8rpx;
      color: #9ea5bb;
      flex: 1;
      font-size: 32rpx;
    }
    .btn {
      height: 140rpx;
      padding: 0 24rpx;
      line-height: 140rpx;
      color: #3072f6;
    }
    &.unbind {
      .c-title {
        color: #6bc839;
      }
      .btn {
        color: #f53f3f;
      }
    }
  }
</style>
